import React, {useCallback, useRef, useEffect, useState} from 'react';
import {StyleSheet, FlatList, View, TouchableHighlight} from 'react-native';
import ProductItem from './ProductItem';
import ItemSeparatorComponent from '../base/ItemSeparatorComponent';
import PatIcon from '../base/PatIcon';
import Colors from '../../utils/Colors';
import data from '../../../data.json';
// import data from './data.json';
import ProductDetailHeader from './ProductDetailHeader';
import ListHeaderComponent from './Header';
import {http, api} from '../../http';
// const list = data.map(item => {
//   item.icon = item.icon.replace(/^http:/, 'https:');
//   return item;
// });

const ProductList = () => {
  const ref = useRef(null);
  const [list, setList] = useState([]);
  // const [list, setList] = useState([]);
  const [isLoading, setIsloading] = useState(false);
  const [page, setPage] = useState(1);
  const onLoadMore = useCallback(() => {
    if (isLoading) {
      return false;
    }
    setIsloading(true);
    console.log('loadmore.....', page);
    const params = {
      page: page,
      page_size: 30,
    };
    setList(data);
    http.get(api.RECOMMENDATION, params).then(res => {
      if (res) {
        // console.log(res, 'data....');
        // 商品列表数据
        setList(v => [...v, ...res.recommend_products]);
        setPage(v => v + 1);
        setIsloading(false);
      }
    });
  }, [page, isLoading]);
  const onScroll = useCallback(e => {
    // console.log(e.nativeEvent.contentOffset.y);
    // console.log(e.nativeEvent, ref.current);
  }, []);
  const onScrollTop = useCallback(e => {
    ref.current.scrollToIndex({index: 0});
  }, []);
  const renderItem = ({item}) => {
    return <ProductItem item={item} />;
  };
  useEffect(() => {
    onLoadMore();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // list.length = 0;
  return (
    <>
      <TouchableHighlight
        activeOpacity={0.6}
        underlayColor={Colors.patBGRed}
        style={style.goTop}
        onPress={onScrollTop}>
        <View>
          <PatIcon name="arrow-up" size={20} color={Colors.white} />
        </View>
      </TouchableHighlight>
      <FlatList
        initialNumToRender={8} // 初始渲染个数
        ref={ref}
        onScroll={onScroll}
        // style={style.FlatList}
        contentContainerStyle={style.FlatList}
        data={list}
        renderItem={renderItem}
        onEndReached={onLoadMore}
        onEndReachedThreshold={0.3}
        keyExtractor={item => item.product_id}
        numColumns={2}
        /* 分割组件 */
        ItemSeparatorComponent={ItemSeparatorComponent}
        /* 头部 */
        // ListHeaderComponent={ProductDetailHeader}
        /* 列表为空时 */
        ListEmptyComponent={ListHeaderComponent}
      />
    </>
  );
};

const style = StyleSheet.create({
  FlatList: {
    flexDirection: 'column',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: '1.2%',
    paddingRight: '1.2%',
  },
  fadingContainer: {
    opacity: 1,
    backgroundColor: '#f40',
    color: '#fff',
    paddingTop: 10,
    transform: [{rotate: '180deg'}],
  },
  test: {
    width: '100%',
    backgroundColor: '#111',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  goTop: {
    opacity: 0.8,
    position: 'absolute',
    bottom: 100,
    right: 20,
    width: 40,
    height: 40,
    borderRadius: 50,
    zIndex: 99,
    backgroundColor: Colors.patBGRed,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    lineHeight: 40,
    paddingBottom: 5,
  },
});
export default ProductList;
